<template>
  <div
    class="list"
    v-for="item in state.comings.slice(0,state.page)"
    :key="item.filmId"
    @click="$router.push(`/detail/${item.filmId}`)"
  >
    <img :src="item.poster" alt="" />
    <div class="detail">
      <p class="per">
        <span id="title">{{ item.name }}</span
        ><span class="D">{{ item.filmType.name }}</span>
      </p>
      <p>
        观众评分:<span style="color: orange; font-weight: 600">{{
          item.grade
        }}</span>
      </p>
      <p class="per">
        主演:<span v-for="items in item.actors" :key="items">{{
          items.name
        }}</span>
      </p>
      <p>
        <span>{{ item.nation }}</span
        >|<span>{{ item.runtime }}分钟</span
        ><span>{{
          new Date(item.premiereAt * 1000).toLocaleString().slice(0, 9)
        }}</span>
      </p>
    </div>
    <div class="btn"><button>预约</button></div>
  </div>
  <div class="loging" @click="loadMode" v-if="state.comings.length > state.page" >
        点击加载更多...
  </div>
  <div class="loging" v-else>没有了</div>
</template>

<script setup>
import axios from "axios";
import { reactive, onMounted } from "vue";
import { getComings } from "../api/mockApi.js";

const state = reactive({
  comings: [],
  page:5
});
function loadMode(e){
    if (state.comings.length > state.page)
        state.page += 5
}
onMounted(() => {
  // axios.get("../data/comings.json").then((res) => {
  //   // console.log(res);
  //   state.comings = res.data.data.films
  // });
   getComings().then((res) => {
    console.log(res);
    state.comings = res.films
  });
});
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  height: 150px;
  display: flex;
  padding: 10px 10px;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
}
.list button {
  height: 20px;
  width: 50px;
}
.detail {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.detail span {
  margin: 0 3px;
}
.btn {
  display: flex;
  align-items: center;
}
.btn button {
  background-color: #fff;
  height: 30px;
  width: 40px;
  border-radius: 5px;
  border: 1px solid orange;
}
.btn button:hover {
  background-color: orange;
}
.detail .per {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.list #title {
  font-size: 20px;
  font-weight: 700;
}
.detail .D {
  background-color: #ccc;
  padding: 3px;
  border-radius: 5px;
}
.loging {
  width: 95%;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  background-color: #cccccc37;
  color: orange;
  border-radius: 10px;
}
</style>